<template>
  <div class="tiktok-search">
    <c-title text="搜索"></c-title>
    <div class="top">
      <van-search style="width: 100%;" v-model="SearchValue" shape="round" @search="search" placeholder="请输入关键词" />
    </div>
    <div class="platform">
      <div v-if="aggregate_module_show.includes(1)" class="platform-item"
        :class="{ 'platform-current': platform_index == 1 }" @click="platform_handle(1)">
        <img :src="imgHost + 'dy.png'" />
        <div>抖音</div>
      </div>
      <div v-if="aggregate_module_show.includes(2)" class="platform-item"
        :class="{ 'platform-current': platform_index == 2 }" @click="platform_handle(2)">
        <img :src="imgHost + 'tb.png'" />
        <div>淘宝</div>
      </div>
      <div v-if="aggregate_module_show.includes(3)" class="platform-item"
        :class="{ 'platform-current': platform_index == 3 }" @click="platform_handle(3)">
        <img :src="imgHost + 'jd.png'" />
        <div>京东</div>
      </div>
      <div v-if="aggregate_module_show.includes(4)" class="platform-item"
        :class="{ 'platform-current': platform_index == 4 }" @click="platform_handle(4)">
        <img :src="imgHost + 'pdd.png'" />
        <div>拼多多</div>
      </div>
      <div v-if="aggregate_module_show.includes(5)" class="platform-item"
        :class="{ 'platform-current': platform_index == 5 }" @click="platform_handle(5)">
        <img :src="imgHost + 'wph.png'" />
        <div>唯品会</div>
      </div>
    </div>
    <div class="tab">
      <span @click="choose(1)" :class="{ active: choose_index == 1 }">综合</span>
      <span @click="choose(2)"
        :class="{ active: choose_index == 2, up: sort.up == 1 && choose_index == 2, down: sort.down == 1 && choose_index == 2 }"
        class="grid-content">销量</span>
      <span @click="choose(3)"
        :class="{ active: choose_index == 3, up: sort.up == 1 && choose_index == 3, down: sort.down == 1 && choose_index == 3 }"
        class="grid-content">到手价</span>
    </div>
    <div style="padding-top: 0.625rem;margin:0 .75rem .625rem;">
      <GoodList :goodsList="list" :aggregate_module_code="platform_index"></GoodList>
    </div>
  </div>
</template>

<script>
import GoodList from "./component/goods.vue";
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  components: { GoodList },
  data() {
    return {
      imgHost: "",
      platform_index: null,
      aggregate_module_show: [],//平台类型 1抖音2淘宝3京东4拼多多5唯品会
      list: [],
      SearchValue: "",
      choose_index: 1,
      cate_id: "",
      sort: {
        up: 0,
        down: 0
      },

      search_type: 0,
      order_type: 0,

      current_page: 1,
      last_page: 1,
      isLoadMore: true,
      nextPageOffset: 0,
    };
  },
   activated(){
    if(this.aggregate_module_show.length==0){
      this.get_aggregate();
    }
  },
 async mounted() {
    this.imgHost = `${window.location.origin}/static/local/tiktok-cps/`;
    await this.get_aggregate();
    let query = this.$route.query;
    this.list = [];
    let json = { page: 1, title: this.SearchValue, search_type: this.search_type, order_type: this.order_type }
    this.isLoadMore = true;
    if (query.cate_id) {
      this.cate_id = query.cate_id;
      json.cate_id = query.cate_id;
    }
    if(query.code){
      this.platform_index = query.code;
    }
    if (query.title) {
      json.title = decodeURI(String(query.title));
      this.SearchValue = decodeURI(String(query.title));
    }
    if (query.material_id) { //物料id 只支持淘宝、京东、拼多多
      let json = {
        page: 1,
        material_id: query.material_id,
        aggregate_module_code: query.code
      }
      this.get_listby_id(json);
      return;
    }
    if (query.code == 4) {//拼多多，先请求商品列表看看授权了没；
      this.check_pdd()
    } else {
      if (query.code == 3) { // 京东
        json = {
          aggregate_module_code: query.code,
          cate_v1: query.cate_id,
          search_type: 0
        }
        if (query.title) {
          json.title = decodeURI(String(query.title));
        }

      }
      if(query.code){
        this.getData(json);
      }
    }
  },
  methods: {
    platform_handle(index) {
      this.platform_index = index;
      console.log(index,'index===');
      this.list = [];
      if (index == 1) {
        this.getData({ aggregate_module_code:index,page: 1, search_type: this.search_type, order_type: this.order_type });
      } else {
        this.getData({ aggregate_module_code:index, page: 1, search_type: this.search_type, order_type: this.order_type });
      }
    },
    get_aggregate() {
      $http.get("plugin.tiktok-cps.api.goods.getAggregateModuleShow").then(res => {
        if (res.result) {
          let arr = res.data.aggregate_module_show;
          this.aggregate_module_show = arr;
          if(!this.$route.query.code){
            this.platform_index = arr[0];
            let aggregate_module_code = arr[0];
            let json = {
              aggregate_module_code,
              search_type:0
            }
            if(aggregate_module_code==5||aggregate_module_code==2){
              json.title = '家电';
              if(aggregate_module_code==2){
                json.search_type = 2;
                json.order_type = 0
              }
            }
          
            this.getData(json)
          }
        }
      })

    },
    get_listby_id(json) {
      $http.get('plugin.tiktok-cps.api.goods.goodListByMaterialId', json, '.').then(res => {
        if (res.result) {
          let data = res.data;
          if (data) {
            this.list = this.list.concat(data.data || []);
            this.current_page = Number(data.current_page);
            this.last_page = data.last_page;
            this.isLoadMore = true;
          }
        } else {
          if (res.result == 0 && res.data.code == 2) {
            this.get_Authorize()
            return;
          }
          this.$toast(res.msg);
        }
      })
    },
    check_pdd() {
      let json = { aggregate_module_code: 4, search_type: 0 };
      if (this.$route.query.title) {
        json.title = decodeURI(String(this.$route.query.title));
      }
      if (this.$route.query.cate_id) {
        this.cate_id = this.$route.query.cate_id;
        json.cate_id = this.$route.query.cate_id;
      }
      $http.post('plugin.tiktok-cps.api.goods.good-list', json, '.').then(({ result, data }) => {
        if (result == 0 && data.code == 2) {//未授权
          this.get_Authorize()
        } else {
          this.list = this.list.concat(data.data || []);
          this.current_page = Number(data.current_page);
          this.last_page = data.last_page;
          this.isLoadMore = true;
        }
      })
    },
    get_Authorize() {
      $http.get('plugin.tiktok-cps.api.goods.pddPromUrlGenerate').then(res => {
        if (res.result) {
          window.location.href = res.data.url_list[0].mobile_url;
        } else {
          this.$toast(res.msg);
        }
      })
    },
    search() {
      this.list = [];
      this.getData({ page: 1, title: this.SearchValue, search_type: this.search_type, order_type: this.order_type });
    },
    async getData(json) {
      let code = this.platform_index, url = "plugin.tiktok-cps.api.goods.good-list", search_type = 0;
      if (this.platform_index) {
        json.aggregate_module_code = code;
      }
      if(this.SearchValue){
        json.title = this.SearchValue;
      }
      if (code == 5 && this.$route.query.material_id) {//唯品会-频道
        url = 'plugin.tiktok-cps.api.goods.GoodListByChannel';
        json.channelType = this.$route.query.material_id;
        if (this.nextPageOffset) {
          json.offset = this.nextPageOffset;
        } else {
          json.offset = 0
        }
      }
      if (code == 2) {       // 淘宝
        if(json.search_type==0){
          json.search_type = 2
          json.order_type = 0;
        }else if(json.search_type==1){
          json.search_type = 0;
        }else if(json.search_type==2){
          json.search_type = 4;
        }
      }
      if (code == 3 || code == 4 || code == 5) {
        if (json.search_type == 1 && json.order_type == 0) {
          search_type = 5;
        } else if (json.search_type == 1 && json.order_type == 1) {
          search_type = 6;
        } else if (json.search_type == 2 && json.order_type == 0) {
          search_type = 3;
        } else if (json.search_type == 2 && json.order_type == 1) {
          search_type = 4;
        } else {
          search_type = json.search_type;
        }
        if(code ==3){
          json.cate_v1 = json.cate_id || this.$route.query.cate_id;
          delete json.cate_id;
        }
        json.search_type = search_type;
        delete json.order_type;
      }
      let { result, msg, data } = await $http.get(url, json,'.');
      if (result == 0) {
        return this.$toast(msg);
      }
      if (code == 5) {
        if (data.data) {
          this.list = this.list.concat(data.data || []);
          this.nextPageOffset = data.nextPageOffset;
        }
      } else if (code==2||code == 3 || code == 4) {
        if(data.current_page==1){
          this.list = data.data||[];
        }else{
          this.list = this.list.concat(data.data);
        }
      } else {
        if (json.page == 1 && data) {
          this.list = data.products || [];
        } else if (json.page > 1) {
          this.list = this.list.concat(data.products);
        }
      }
      if (code == 5) {
        if (data.nextPageOffset == 0) {//没有下一页
          this.current_page = 2;
          this.last_page = 1;
        } else {
          this.current_page = 1;
          this.last_page = 2;
        }
      } else {
        if(data){
          this.current_page = Number(data.current_page);
          this.last_page = data.last_page;
        }
      }
      this.isLoadMore = true;
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let json = {}
      json.page = page;
      json.search_type = this.search_type;
      json.order_type = this.order_type;
      json.title = this.SearchValue;
      json.aggregate_module_code = this.platform_index;
      if(this.platform_index==2){
        if(this.search_type==1){
          json.search_type = 0;
        }else if(this.search_type==2){
          json.search_type= 4;
        }else{
          json.search_type= 2;
        }
      }
      if (this.cate_id) {
        json.cate_id = this.cate_id;
      }
      if (this.$route.query.material_id) {
        let json = {
          page,
          material_id: this.$route.query.material_id,
          aggregate_module_code: this.$route.query.code
        }
        this.get_listby_id(json);
        return;
      }
      this.getData(json);
    },
    choose(index) {
      this.list = [];
      this.choose_index = index;
      let order_type = 0;
      if (index == 2 || index == 3 || index == 4) {
        if (this.sort.up == 0 && this.sort.down == 0) {
          this.sort.up = 1;
        } else if (this.sort.up == 1) {
          this.sort.down = 1;
          this.sort.up = 0;
        } else if (this.sort.down == 1) {
          this.sort.up = 1;
          this.sort.down = 0;
        }
      } else if (this.choose_index !== 3 || index == 2 || index == 4) {
        this.sort.up = 0;
        this.sort.down = 0;
      }
      if (this.sort.down == 1) {
        order_type = 1;
      }
      let search_type = index - 1;
      this.order_type = order_type;
      this.search_type = search_type;
      this.getData({ aggregate_module_code:this.platform_index,page: 1, search_type, order_type, title: this.SearchValue });
    }
  }
};
</script>

<style scoped lang="scss">
.tiktok-search {
  .platform {
    margin: .625rem .75rem 0;
    display: flex;
    align-items: center;


    .platform-item {
      width: 4rem;
      height: 4.625rem;
      background: #FFFFFF;
      border-radius: .5rem;
      // border: 1px solid #F15353;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: .5313rem;
      font-size: .75rem;
      padding-bottom: .4063rem;

      img {
        width: 2rem;
      }
    }

    .platform-item:last-child {
      margin-right: 0;
    }


    .platform-current {
      position: relative;
      border: 1px solid #F15353;
      color: #F15353 !important;

      div {
        position: relative;
        padding: .1875rem .7188rem;
        box-sizing: border-box;
        font-weight: 500;
        line-height: 1;
      }

      div::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #F15353;
        border-radius: .25rem .25rem .25rem .25rem;
        opacity: 0.1;
      }

      &::before {
        content: "";
        position: absolute;
        top: 98%;
        left: 50%;
        transform: translateX(-50%);
        border: 0.35rem solid transparent;
        border-top-color: #fff;
        z-index: 5;
      }

      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 0.35rem solid transparent;
        border-top-color: #FF5544;
      }
    }

  }

  .active {
    color: #ef5452;
  }

  .grid-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(../../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }

  .tab {
    display: flex;
    justify-content: space-between;
    margin-bottom: .7188rem;
    padding: 0 1.875rem;
    margin-top: .9688rem;
  }

  .top {
    display: flex;
    background: #fff;
    align-items: center;
  }
}
</style>
